var img1=site.getElementsByClassName("img")[0]
var xhr=new XMLHttpRequest();
xhr.open("GET","../php/banner.php");
xhr.send(null);
xhr.onreadystatechange=()=>{
	if(xhr.status==200 && xhr.readyState==4){
		var data=xhr.responseText;
		var arr=JSON.parse(data);
        arr.forEach((val,i)=>{
            var img=new Image();
            img.src=val.url;
            img1.appendChild(img)
            var li=document.createElement("li")
            li.setAttribute("zx",i)
            ul.appendChild(li)
            if(i==0){
                li.className="active" 
            }
        })
        for ( var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () { 
            getBanner(0,this)
            }
        }
	}
}

var header = document.getElementsByTagName("header")[0]
    , bot = header.getElementsByClassName("bot")[0]
    , a = bot.getElementsByTagName("a")
    , gold = document.getElementsByClassName("gold")
for (var i = 0; i < a.length; i++) {
    a[i].onclick = function () {
        for (i = 0; i < a.length; i++) {
            a[i].className = ""
            gold[i].className = "gold"
        }
        j = this.getAttribute("zx")
        a[j].className = "active"
        gold[j].className = "gold active"
    }
}

var banner = site.getElementsByClassName("banner")[0]
    , img = banner.getElementsByClassName("img")[0]
    , spans = banner.getElementsByTagName("span")
    , j = 0
    , lis = banner.getElementsByTagName("li")
    ,d1s=site.getElementsByClassName("d1")
for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function () {
        if (this.innerText == ">") {
          getBanner(1)
        } else {
         getBanner(-1)
        }
    }
}

time = setInterval( ()=>getBanner(1), 4000)
banner.onmouseover =()=>clearInterval(time)
banner.onmouseout = ()=>time = setInterval(()=>getBanner(1), 4000)
function getBanner(x, y) {
    if(x){
        j+=x
        j>4&&(j=0)
        j<0&&(j=4)
    }
    else {
        j=parseInt(y.getAttribute("zx"))
    }
    for (i=0;i<lis.length;i++) {
        lis[i].className=""
    }
    img.style.marginLeft=j*-100+"%"
    lis[j].className="active"
}
for(var i=0;i<d1s.length;i++){
    d1s[i].onclick=function(){
        for(var i=0;i<d1s.length;i++){
            d1s[i].className="d1"
        }
        this.className="d1 active"
    }
}

var is=psjd.getElementsByTagName("i")
,h2=psjd.getElementsByTagName("h2")[0]
,left=psjd.getElementsByClassName("left")[0]
,ps=left.getElementsByTagName("p")
,rights=psjd.getElementsByClassName("right")
for(var i=0;i<is.length;i++){
    is[i].onclick=function(){
        if(this.innerHTML=="+"){
            this.innerHTML="-"
            this.previousElementSibling.style.color="rgb(131,10,19)"
            this.parentNode.nextElementSibling.style.display="block"
          
        }else{
            this.innerHTML="+"
            this.previousElementSibling.style.color="rgb(51,51,51)"
            this.parentNode.nextElementSibling.style.display="none"
        }
    }
}
for(var i=0;i<ps.length;i++){
    ps[i].onclick=function(){
        for(var i=0;i<ps.length;i++){
            ps[i].className=""
            rights[i].className="right"
        }
        h2.innerHTML="首页：拍摄基地"
        var j=this.getAttribute("zx") 
        ps[j].className="active"
        h2.innerHTML+=">"+this.parentNode.previousElementSibling.firstElementChild.innerHTML+">"+this.innerHTML
        rights[j].className="right active"
    }
}

var liz=zskz.getElementsByTagName("li")
,h2z=zskz.getElementsByTagName("h2")[0]
,rightz=zskz.getElementsByClassName("right")
,iz=zskz.getElementsByTagName("i")
for(var i=0;i<liz.length;i++){
    liz[i].onclick=function(){
        for(var i=0;i<liz.length;i++){
            liz[i].className=""
            rightz[i].className="right"
            iz[i].innerText="+"
        }
        h2z.innerHTML="首页：真实客照"        
        h2z.innerHTML+=">"+this.firstElementChild.innerHTML
        var j=this.getAttribute("zx")
        liz[j].className="active"
        rightz[j].className="right active"
        this.lastElementChild.innerText="-"
    }
}

var lix=xzys.getElementsByTagName("li")
,h2x=xzys.getElementsByTagName("h2")[0]
,rightx=xzys.getElementsByClassName("right")
,ix=xzys.getElementsByTagName("i")
for(var i=0;i<lix.length;i++){
    lix[i].onclick=function(){
        for(var i=0;i<lix.length;i++){
            lix[i].className=""
            rightx[i].className="right"
            ix[i].innerText="+"
        }
        h2x.innerHTML="首页：选择影师"        
        h2x.innerHTML+=">"+this.firstElementChild.innerHTML
        var j=this.getAttribute("zx")
        lix[j].className="active"
        rightx[j].className="right active"
        this.lastElementChild.innerText="-"
    }
}

var xhr1=new XMLHttpRequest();
xhr1.open("GET","../php/psjd.php");
xhr1.send(null);
xhr1.onreadystatechange=()=>{
	if(xhr1.status==200 && xhr1.readyState==4){
		var data1=xhr1.responseText;
		var arr1=JSON.parse(data1);
        console.log(arr1)
        arr1.forEach((val,i)=>{
            var b1=document.createElement("div")
            b1.className="b1" 
            var p=document.createElement("p")
            var img=new Image()
            var span=document.createElement("span")
            p.innerHTML=val.titl
            img.src=val.src
            span.innerHTML=val.cont
            if(i%2==0){
                b1.appendChild(img)
                b1.appendChild(p)
                b1.appendChild(span)
            }else{
                b1.appendChild(span)
                b1.appendChild(p)
                b1.appendChild(img)
            }
            bcen.appendChild(b1)
        })
	}
}

var xhr2=new XMLHttpRequest();
xhr2.open("GET","../php/xzys.php");
xhr2.send(null);
xhr2.onreadystatechange=()=>{
	if(xhr2.status==200 && xhr2.readyState==4){
		var data2=xhr2.responseText;
		var arr2=JSON.parse(data2);
        console.log(arr2)
        arr2.forEach((val,i)=>{
            var d1=document.createElement("div")
            d1.className="d1" 
            var p1=document.createElement("p")
            var img=new Image()
            var p2=document.createElement("p")
            var p3=document.createElement("p")
            img.src=val.src
            p1.innerHTML=val.name
            p2.innerHTML=val.nam  
            p3.innerHTML=val.con
            d1.appendChild(img)
            d1.appendChild(p1)
            d1.appendChild(p2)
            d1.appendChild(p3)
            dcen.appendChild(d1)
        })
	}
}